<template>
  <div class="TicketReservation">
      <div class="three">
          <div class="easting" @click="show=!show">
          <div class="data">{{flights.airline_name}} {{flights.flight_no}}</div>
          <div class="data span"><span>{{flights.dep_time}}</span><span>{{flights.org_airport_name}}</span></div>
          <div class="data span"><span>{{flights.arr_time}}</span><span>{{flights.dst_airport_name}}</span></div>
          <div class="data">￥ <samp>{{flights.base_price}}</samp> 起</div>
          <div class="time"> {{timeDifference}}</div>
          </div>

          <div class="divide_equally" v-show="show">

              <div class="tuijian">低价推荐</div>

              <div class="add">
                <div class="recommend" v-for="item in flights.seat_infos" :key="item.index">
                <div class="reco"><span>{{item.name}}</span> | {{item.supplierName}}</div>
                <div class="one">￥{{item.org_settle_price}}</div>
                <div class="two">
                    <el-row>
                    <el-button size="mini" style="background: #e6a23c;" @click="ChooseTheTicket(item)">选定</el-button>
                    </el-row>
                    <samp>剩余：{{item.discount}}</samp>
                </div>
                </div>
              </div>

          </div> 
      </div>
  </div>
</template>

<script>
export default {
    props: ['flights'],
    data(){
        return {
            show: false,
        }
    },
    computed:{
        timeDifference() {
            let start = +new Date( this.flights.dep_datetime )
            let end = +new Date(this.flights.arr_datetime)  //转为时间戳

            let time = end - start
            
            time = time > 0 ? time : time + 24*60*60*1000
            let hour = parseInt(time/60/60/1000)
            let minute = time/60/1000 - hour*60        
    
            return `${hour}时${minute}分钟`
        }
    },
    methods: {
        // 点击选择机票  跳转到提交信息页，通过$router.query传参
        ChooseTheTicket(item) {
            const {id} = this.flights
            const {seat_xid} = item
            console.log(id+"------"+seat_xid);
            this.$router.push({path:'/air/order',query:{id,seat_xid}})
        }
    }
}
</script>

<style lang="less" scoped>
.TicketReservation {
    width: 100%;
    .three {
        width: 100%;
        height: 100%;
        margin-bottom: 10px;
    }
    .easting {
        width: 100%;
        display: flex;
        padding: 6px 10px;
        justify-content: space-around;
        align-items: center;
        border: solid #dedede 1px;
        position: relative;
        .span {
            display: flex;
            flex-direction: column;
            align-items: center;
            span{
                font-size: 16px;
                font-weight: bold;
                &:nth-child(2){
                    font-size: 14px;
                    color: #999696;
                    font-weight: normal;
                }
            }
        }
        samp{
            color: #ffc29f;
        }
        .time {
            position: absolute;
            top: 19%;
            left: 46%;
            font-size: 12px;
            color: #aa9da7;
            padding: 3px;
            border-bottom: 1px solid #aa9da7;
            z-index: 200;
            width: 76px;
        }
    }
    .divide_equally {
        display: flex;
        width: 100%;
        background: #f6f6f6;
        align-items: center;
        .tuijian {
            flex: 2;
            padding-left: 20px;
            height: 100%;
            font-size: 14px;
        }
    }
    .add {
        flex: 10;
    }
    .recommend{
        padding: 6px;
        display: flex;
        align-items: center;
        border-bottom: solid #dddddd 1px;
        &:last-child {
            border-bottom: none;
        }
        .reco {
            flex: 4;
            font-size: 12px;
            span{
                color: #008000;
            }
        }
        .one {
            flex: 1;
            color: #e6a23c;
        }
        .two {
            flex: 1;
            font-size: 12px;
            text-align: center;
        }
    }
}
</style>